<template>
    <div>
        <el-table ref="multipleTable" :data="listData" border size="mini" style="width: 100%"
                  tooltip-effect="dark" @selection-change="handleSelectionChange">
            <el-table-column align="center" type="selection" width="55">
            </el-table-column>
---
            <el-table-column align="center" label="@{field.label}">
                <template slot-scope="scope">
                    <p>{{ scope.row.@{field.name} }}</p> @{field} ~{!@{field.name}IMG}
                     <el-avatar :src="scope.row.@{field.name}"></el-avatar> ~{&@{field.name}IMG}
                </template>
            </el-table-column>
+++
            <el-table-column align="center" label="操作" prpo="right" width="200">
                <template slot-scope="scope">
                    <el-button type="text" @click="introduceButton(scope.row)">详细信息</el-button>
                    <el-button type="text" @click="updateButton(scope.row)">修改</el-button>
                    <el-button type="text" @click="deleteButton(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="text-align:center">
            <h1></h1>
            <el-pagination :page-size="100" :page-sizes="[8, 16, 24, 32]"
                           :total="total" layout="total, sizes, prev, pager, next, jumper"
                           @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {list#{Database}, total#{Database},delete#{Database}} from "@/api/#{database}Server";
export default {
    name: "#{database}Table",
    data() {
        return {
            pageSize: 8, //每一页的数据
            currpage: 1, //当前页
            total: 0, //所有的数据
            listData: [], //数组用来存放临时数据 当前页的数据存放
            multipleSelection: [], // 当前选中的数据
            tableData: [],  // 数组用来存放查询出来的总数据
        }
    },
    mounted() {
        this.total = this.tableData.length;
        this.$bus.$on('#{database}UpDataTable', this.upData)      // 显示更新表格
        this.upData(); //需要触发的函数
    },
    methods: {
        // 删除按钮
        deleteButton(message) {
            delete#{Database}(scope.row.id).then(response => {
            // 删除成功
            })
        },
        // 修改按钮
        updateButton(message) {
            this.$bus.$emit('#{database}UpdateOpen', message)
        },
        // 详细信息按钮
        introduceButton(message){
            this.$bus.$emit('#{database}IntroduceOpen', message)
        },
        // 表格当前页数据更新
        upData() {
            if (this.tableData.length !== 0) {
                let start = (this.currpage - 1) * this.pageSize;
                let end = start + this.pageSize;
                this.listData = this.tableData.slice(start, end);
            } else {
                list#{Database}({
                    'current': this.currpage,
                    'size': this.pageSize
                }).then(response => {
                    this.listData = response.data.data;
                    total#{Database}().then(response => {
                        this.total = response.data.data;
                    })
                });
            }
        },
        // 表格内容多选的函数
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 表格修改每页大小的函数
        handleSizeChange(val) {
            this.pageSize = val;
            this.upData();
        },
        // 表格换页的函数
        handleCurrentChange(val) {
            this.currpage = val;
            this.upData();
        },
    }
}
</script>

<style scoped>

</style>